import { Tabs } from 'antd'
import React, {useState} from "react";
import styles from './login.module.scss'
import Login from './Login.tsx'
import EmailLogin from "@/views/Login/EmailLogin.tsx";
import ResetPassword from "@/views/Login/ResetPassword.tsx";
import Register from '@/views/Login/Register.tsx'
import LoginBackground from "@/views/Login/LoginBackground.tsx";

interface ITabItem {
    label: string
    key: ETabItemKey
    closeIcon: boolean
    children: React.ReactNode
}
export enum ETabItemKey {
    password = 'password-login',
    email = 'email-login',
    reset = 'reset-password',
    register = 'register'
}
const Index = () => {
    const [activeKey, setActiveKey] = useState<ETabItemKey | string>(ETabItemKey.password)
    const [items] = useState<Array<ITabItem>>([
        { label: '密码登录', key: ETabItemKey.password, closeIcon: false, children: <Login change={(key: ETabItemKey) => change(key)} /> },
        { label: '邮箱登录', key: ETabItemKey.email, closeIcon: false, children: <EmailLogin change={(key: ETabItemKey) => change(key)} /> },
        { label: '重置密码', key: ETabItemKey.reset, closeIcon: false, children: <ResetPassword change={(key: ETabItemKey) => change(key)}/> },
        { label: '账号注册', key: ETabItemKey.register, closeIcon: false, children: <Register change={(key: ETabItemKey) => change(key)}/> }
    ])
    const change = (activeKey: string) => {
        setActiveKey(activeKey)
    }
    return (
        <div className={styles.login}>
            <div className={styles.card}>
                <Tabs items={items} type="editable-card" hideAdd={true} activeKey={activeKey} onChange={change} />
            </div>
            <LoginBackground />
        </div>
    )
}

export default Index